<template>
  <div class="screen-container" ref="screenContainerRef">
    <!-- 缩放容器 -->
    <div class="scale-box" ref="scaleBoxRef">
      <!-- 顶部导航 -->
      <div class="header">
        <h1>Nebula 大屏展示系统</h1>
        <div class="time">{{ currentTime }}</div>
      </div>

      <!-- 主体三栏布局 -->
      <div class="content">
        <!-- 左 -->
        <div class="left-panel">
          <!-- group="panels"	定义拖拽分组名称，相同 group 的 <draggable> 之间可以互相拖拽元素。 -->
          <!-- :animation="200"	拖拽动画时长（毫秒），此处设为 200ms 的平滑动画效果。 -->
          <!-- :tag="'div'"	指定外层容器渲染为 <div> 标签（默认是 transition-group）。 -->
          <draggable
            v-model="leftPanels"
            group="panelsLeft"
            :animation="200"
            item-key="name"
            :tag="'div'"
            class="panel"
          >
            <!-- 定义每个拖拽项（leftPanels 的元素）的渲染模板。 -->
            <!-- element：当前遍历的数组元素（如 { name: 'Chart', ... }）。 -->
            <template #item="{ element, index }">
              <component
                :is="componentMap[element.name]"
                :key="index"
                class="card"
              />
            </template>
          </draggable>
        </div>

        <!-- 中 -->
        <div class="main-panel">
          <draggable
            v-model="mainPanels"
            group="panelsMain"
            class="panel"
            :animation="200"
          >
            <template #item="{ element, index }">
              <component
                :is="componentMap[element.name]"
                :key="index"
                class="card"
              />
            </template>
          </draggable>
        </div>

        <!-- 右 -->
        <div class="right-panel">
          <draggable
            v-model="rightPanels"
            group="panelsRight"
            class="panel"
            :animation="200"
          >
            <template #item="{ element, index }">
              <component
                :is="componentMap[element.name]"
                :key="index"
                class="card"
              />
            </template>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import dayjs from "dayjs";
import { componentMap } from "./components";
import draggable from "vuedraggable";

// 在 Screen.vue 中定义
const layoutConfig = ref([
  { name: "ActiveUserCard", panel: "left" },
  { name: "RegisterTrendChart", panel: "left" },
  { name: "VisitMapChart", panel: "main" },
  { name: "SystemStatusChart", panel: "main" },
  { name: "ActivityRankChart", panel: "right" },
  { name: "UserPieChart", panel: "right" },
]);

// 区域过滤
const leftPanels = computed({
  get: () => layoutConfig.value.filter((c) => c.panel === "left"),
  set: (val) => updatePanel("left", val),
});
const mainPanels = computed({
  get: () => layoutConfig.value.filter((c) => c.panel === "main"),
  set: (val) => updatePanel("main", val),
});

const rightPanels = computed({
  get: () => layoutConfig.value.filter((c) => c.panel === "right"),
  set: (val) => updatePanel("right", val),
});

// 同步排序后的 layoutConfig
function updatePanel(panel, val) {
  const others = layoutConfig.value.filter((c) => c.panel !== panel);
  layoutConfig.value = [...others, ...val.map((v) => ({ ...v, panel }))];
}

const scaleBoxRef = ref(null);
const screenContainerRef = ref(null);
const currentTime = ref(dayjs().format("YYYY-MM-DD HH:mm:ss"));

const updateClock = () => {
  currentTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
};

const resize = () => {
  let DESIGN_WIDTH = 1920;
  let DESIGN_HEIGHT = 1080;
  const clientWidth = screenContainerRef.value.clientWidth;
  const clientHeight = screenContainerRef.value.clientHeight;
  const scaleX = (16 * clientHeight) / 9 / DESIGN_WIDTH;
  const scaleY = (clientWidth * 9) / 16 / DESIGN_HEIGHT;
  if (clientWidth / clientHeight > 16 / 9) {
    scaleBoxRef.value.style.transform = `scale(${scaleX}) `;
  } else {
    scaleBoxRef.value.style.transform = `scaleY(${scaleY})`;
  }

  if (scaleBoxRef.value) {
  }
};

onMounted(() => {
  resize();
  setInterval(updateClock, 1000);
  window.addEventListener("resize", resize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
</script>

<style scoped>
.screen-container {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: start;
  overflow: hidden;
}

.scale-box {
  width: 1920px;
  height: 1080px;
  transform-origin: top center;
  position: relative;
  background-color: #0d1b2a;
  color: #fff;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 24px;
  height: 20px;
}

.content {
  display: flex;
  margin-top: 20px;
  height: calc(100% - 60px);
}

.left-panel {
  flex: 0 0 25%; /* 固定为 1/4 宽度 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.right-panel {
  flex: 0 0 25%; /* 固定为 1/4 宽度 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.main-panel {
  flex: 1; /* 自适应，占据剩余 50% */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.card {
  border: 1px solid rgba(0, 232, 255, 0.1);
  box-shadow: 0 0 5px rgba(0, 232, 255, 0.2);
  border-radius: 8px;
  flex: 1;
}
.panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.panel > .draggable-item, /* vuedraggable 可能使用的默认类名 */
.panel > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
